<template>
  <a-steps
    v-model:current="current1"
    :direction="direction"
    :initial="initial"
    :label-placement="labelPlacement"
    :percent="percent"
    :progress-dot="progressDot"
    :responsive="responsive"
    :size="size"
    :status="status"
    :type="type"
  >
    <slot />
    <template v-if="$slots.progressDot" #progressDot>
      <slot name="progressDot" />
    </template>
  </a-steps>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { Steps } from 'ant-design-vue'
export default defineComponent({
  name: 'ZSteps',
  components: {
    ASteps: Steps
  },
  props: {
    current: {
      type: Number,
      default: 0
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    initial: {
      type: Number,
      default: 0
    },
    labelPlacement: {
      type: String,
      default: 'horizontal'
    },
    percent: {
      type: Number,
      default: undefined
    },
    progressDot: {
      type: Boolean,
      default: false
    },
    responsive: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'default'
    },
    status: {
      type: String,
      default: 'process'
    },
    type: {
      type: String,
      default: 'default'
    }
  },
  setup(props, _ref) {
    const current1 = computed({
      get() {
        return props.current
      },
      set(val) {
        _ref.emit('update:current', val)
      }
    })
    return {
      current1
    }
  }
})
</script>
